/**
* 支付管理 支付配置
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>会议列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-tabs v-model="tab" @tab-click="handleClick" class="user-search">
      <el-tab-pane :label="'我的会议 ('+stateItem[0].count+')'" name="0">
        <!--列表-->
        <el-table size="small" :data="listData" highlight-current-row v-loading="loading" height="500"
                  element-loading-text="拼命加载中" style="width: 100%;">
          <el-table-column align="center" type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column sortable prop="accountingRecord.recordCode" label="会议编码" min-width="150"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column sortable prop="accountingRecord.user.userName" label="会议发起人" min-width="140"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column sortable prop="accountingRecord.meetingRoom.roomCode" label="会议室编码" min-width="150"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column sortable prop="accountingRecord.meetingRoom.roomName" label="会议室名称" min-width="150"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column sortable prop="accountingRecord.remark" label="会议说明" width="200" show-overflow-tooltip>
          </el-table-column>
          <el-table-column sortable prop="accountingRecord.beginTime" label="会议开始时间" min-width="150">
          </el-table-column>
          <el-table-column sortable prop="accountingRecord.endTime" label="会议结束时间" min-width="150">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="'我的申请 ('+stateItem[1].count+')'" name="1">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="搜索：">
            <el-select v-model="formInline.recordStatus" clearable placeholder="请选择">
              <el-option label="全部" value="" key=""></el-option>
              <el-option label="审核中" value="1" key="1"></el-option>
              <el-option label="审核通过" value="2" key="2"></el-option>
              <el-option label="审核不通过" value="3" key="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">申请会议</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="cancel">取消会议</el-button>
          </el-form-item>
        </el-form>
        <el-table size="small" :data="listData" highlight-current-row v-loading="loading" height="500"
                  element-loading-text="拼命加载中" style="width: 100%;" @selection-change="selectChange">
          <el-table-column align="center" type="selection" width="55">
          </el-table-column>
          <el-table-column align="center" type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column sortable prop="recordCode" label="会议编码" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column sortable prop="meetingRoom.roomCode" label="会议室编码" width="150" show-overflow-tooltip>
          </el-table-column>
          <el-table-column sortable prop="meetingRoom.roomName" label="会议室名称" width="150" show-overflow-tooltip>
          </el-table-column>
          <el-table-column sortable prop="meetingRoom.roomType" label="会议室类型" width="200">
            <template slot-scope="scope">
              <div>{{scope.row.meetingRoom.roomType == 1?'大型会议室':scope.row.meetingRoom.roomType == 2?'中型会议室':'小型会议室'}}</div>
            </template>
          </el-table-column>
          <el-table-column sortable prop="recordStatus" label="审核状态" width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>{{scope.row.recordStatus==1?'审核中':scope.row.recordStatus==2?'已审核':'被驳回'}}</div>
            </template>
          </el-table-column>
          <el-table-column sortable prop="remark" label="会议说明" width="200" show-overflow-tooltip>
          </el-table-column>
          <el-table-column sortable prop="beginTime" label="会议开始时间" min-width="150">
            <template slot-scope="scope">
              <div>{{scope.row.beginTime|timestampToTime}}</div>
            </template>
          </el-table-column>
          <el-table-column sortable prop="endTime" label="会议结束时间" min-width="150">
            <template slot-scope="scope">
              <div>{{scope.row.endTime|timestampToTime}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="300" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="submitCheck(scope.$index, scope.row)" v-if="scope.row.recordStatus==3">提交审核</el-button>
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="success" @click="selectUsers(scope.$index, scope.row)">查看参会人员</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>


    <el-dialog style="justify-items: center" title="参会人员" :visible.sync="userAccessshow" width="55%"
               @click='closeDialog("user")'>
      <div style="text-align: center;">
        <el-transfer
          filterable
          :filter-method="userFilterMethod"
          :titles="['未加入人员', '已加入人员']"
          filter-placeholder="请输入用户名称"
          v-model="userValue"
          :props="{key: 'id',label: 'userName'}"
          :data="userData"
          @change="userHandleChange">
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("user")'>关闭</el-button>
      </div>
    </el-dialog>

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="40%" @click="closeDialog('editForm')">
      <el-dialog
        width="50%"
        title="选择会议室"
        :visible.sync="innerVisible"
        append-to-body>
        <el-form :inline="true" :model="queryMeetingRoomForm">
          <el-form-item label="搜索：">
            <el-input size="small" v-model="queryMeetingRoomForm.roomCodeOrName" placeholder="输入会议室编码或名称"
                      clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="searchMeetingRoom">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table
          ref="singleTable"
          :data="meetingRoomList"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
          height="200"
          size="mini">
          <el-table-column
            type="index"
            label="序号"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            property="roomCode"
            label="会议室编码"
            align="center">
          </el-table-column>
          <el-table-column
            property="roomName"
            label="会议室名称"
            align="center">
          </el-table-column>
          <el-table-column
            property="roomType"
            label="会议室类型"
            align="center">
            <template slot-scope="scope">
              <div>{{scope.row.roomType == 1?'大型会议室':scope.row.roomType == 2?'中型会议室':'小型会议室'}}</div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparmMeetingRoom" @callFather="callFatherMeetingRoom"></Pagination>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="innerVisible = false">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title" @click="submitSelect">保存
          </el-button>
        </div>
      </el-dialog>

      <el-form label-width="100px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="会议编码：" prop="recordCode">
          <el-input v-model="editForm.recordCode" auto-complete="off" placeholder="请输入会议编码" :disabled="title != '添加'"></el-input>
        </el-form-item>
        <el-form-item label="会议时间：" required>
          <el-col :span="11">
            <el-form-item prop="beginTime">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="editForm.beginTime"
                type="datetime"
                placeholder="选择开始时间"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="12">
            <el-form-item prop="endTime">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="editForm.endTime"
                type="datetime"
                placeholder="选择结束时间"
                :picker-options="pickerOptions"
                :disabled="editForm.beginTime == ''">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="会议室：" prop="roomId">
          <el-input v-model="meetingRoomName" auto-complete="off" placeholder="请选择关联会议室" disabled>
            <el-button slot="append" @click="chooseMeetingRoom" icon="el-icon-s-home"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="会议说明：">
          <el-input v-model="editForm.remark"
                    auto-complete="off"
                    placeholder="请输入会议说明"
                    type="textarea"
                    rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('editForm')">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import Pagination from '../../components/Pagination'
    import {Get, Post} from "../../api/axiosFun";
    import {timestampToTime, timestampToDate} from "../../utils/util";

    export default {
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        let now = `${timestampToDate(new Date())}`
                        return time.getTime() < new Date(now).getTime();
                    },
                },

                loading: false, //是显示加载
                editFormVisible: false, //控制编辑页面显示与隐藏
                title: '添加',
                tab: 0,
                stateItem: [
                    {
                        title: "我的会议",
                        name: "meeting",
                        count: 0
                    },
                    {
                        title: "申请列表",
                        name: "record",
                        count: 0
                    }
                ],
                now: '',

                meetingRoomList: [],
                meetingRoomName: '',
                selectMeetingRoom: {},
                innerVisible: false,
                queryMeetingRoomForm: {
                    pageIndex: 0,
                    pageSize: 10,
                    roomCodeOrName: '',
                    enableStatus: 1
                },
                //用户
                userValue: [], //已分配
                userData: [],  //未分配
                recordId: '',
                recordCode: '',
                userAccessshow: false,

                editForm: {
                    id: '',
                    recordCode: '',
                    roomId: '',
                    remark: '',
                    beginTime: '',
                    endTime: '',
                },
                // rules表单验证
                rules: {
                    recordCode: [
                        {required: true, message: '请输入会议编码', trigger: 'blur'}
                    ],
                    roomId: [
                        {required: true, message: '请选择会议室', trigger: 'blur'}
                    ],
                    beginTime: [
                        {required: true, message: '请选择开始时间', trigger: 'blur'}
                    ],
                    endTime: [
                        {required: true, message: '请选择结束时间', trigger: 'blur'}
                    ],
                },
                formInline: {
                    pageIndex: 0,
                    pageSize: 10,
                    recordStatus: '',
                },
                listData: [], //用户数据
                // 分页参数
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 10
                },
                pageparmMeetingRoom: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 10
                },

                selectData: [],
            }
        },
        // 注册组件
        components: {
            Pagination
        },
        /**
         * 数据发生改变
         */
        mounted() {
        },
        /**
         * 创建完毕
         */
        created() {
            this.search();
            setInterval(this.getNow, 1000)
        },

        /**
         * 里面的方法只有被调用才会执行
         */
        methods: {
            handleCurrentChange(val) {
                this.selectMeetingRoom = val;
            },
            chooseMeetingRoom() {
                this.searchMeetingRoom()
                this.innerVisible = true
            },
            // 获取会议室列表
            searchMeetingRoom() {
                Get("/officeSystem/meetingRoom/select", this.queryMeetingRoomForm)
                    .then(result => {
                        if (result.status == 200) {
                            this.pageparmMeetingRoom.total = result.data.totalCount;
                            this.meetingRoomList = result.data.resultList
                        } else {
                            this.pageparmMeetingRoom.total = result.data.totalCount;
                            this.meetingRoomList = []
                        }
                    })
            },
            callFatherMeetingRoom(parm) {
                this.queryMeetingRoomForm.pageIndex = parm.currentPage - 1
                this.queryMeetingRoomForm.pageSize = parm.pageSize
                this.searchMeetingRoom(this.queryMeetingRoomForm)
            },
            submitSelect() {
                this.meetingRoomName = this.selectMeetingRoom.roomName
                this.editForm.roomId = this.selectMeetingRoom.id
                this.innerVisible = false
            },
            getNow() {
                this.now = timestampToTime(new Date());
            },
            handleClick(tab, event) {
                this.formInline.pageIndex = 0;
                this.formInline.recordStatus = '';
                this.tab = tab.name;
                this.getTabsCount();
                this.getdata(this.formInline);
            },
            getTabsCount() {
                Get("/officeSystem/meeting/getStateCount")
                    .then(result => {
                        for (let i = 0; i < this.stateItem.length; i++) {
                            this.stateItem[i].count = result.data[this.stateItem[i].name]
                        }
                    })
            },
            // 获取公司列表
            getdata(parameter) {
                this.loading = true
                // 模拟数据
                this.listData = [];
                let url = "/officeSystem/accountingRecord/select"
                if (this.tab == 0) {
                    url = "/officeSystem/meeting/selectByUser"
                }
                Get(url, parameter)
                    .then(result => {
                        this.listData = result.data.resultList;
                        this.pageparm.total = result.data.totalCount;
                        if (this.tab == 0) {
                            this.listData.forEach((item) => {
                                item.accountingRecord.beginTime = timestampToTime(item.accountingRecord.beginTime)
                                item.accountingRecord.endTime = timestampToTime(item.accountingRecord.endTime)
                            })
                        }
                    })
                this.loading = false
            },
            // 分页插件事件
            callFather(parm) {
                this.formInline.pageIndex = parm.currentPage - 1
                this.formInline.pageSize = parm.pageSize
                this.search()
            },
            // 搜索事件
            search() {
                this.getTabsCount()
                this.getdata(this.formInline)
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true
                if (row != undefined && row != 'undefined') {
                    this.title = '修改'
                    this.editForm.id = row.id
                    this.editForm.recordCode = row.recordCode
                    this.editForm.roomId = row.roomId
                    this.editForm.remark = row.remark
                    this.editForm.beginTime = row.beginTime
                    this.editForm.endTime = row.endTime
                    this.meetingRoomName = row.meetingRoom.roomName
                } else {
                    this.title = '添加'
                    this.editForm.id = ''
                    this.editForm.recordCode = ''
                    this.editForm.roomId = ''
                    this.editForm.remark = ''
                    this.editForm.beginTime = ''
                    this.editForm.endTime = ''
                    this.meetingRoomName = ''
                }
            },
            // 编辑、增加页面保存方法
            submitForm(editData) {
                this.$refs[editData].validate((valid) => {
                    if(valid){
                        let url = "/officeSystem/accountingRecord/update"
                        if(this.title == '添加'){
                            url = "/officeSystem/accountingRecord/insert"
                        }
                        Post(url, this.editForm)
                            .then(result => {
                                if(result.status == 200){
                                    this.$message.success(result.message)
                                    this.search();
                                    this.editFormVisible = false
                                }else{
                                    this.$message.error(result.message)
                                }
                            })
                    }else{
                        return false;
                    }
                })
            },
            // 查询参会人员
            selectUsers(index, row) {
                if (row.recordStatus != 2) {
                    this.$message.warning("会议申请暂未审核通过，无法调整参会人员");
                    return;
                }
                Get("/officeSystem/meeting/selectByRecordAllUser", {
                    recordId: row.id
                }).then(result => {
                    let userValue = []
                    result.data.forEach((item) => {
                        userValue.push(item.user.id);
                    })
                    this.userValue = userValue;
                })
                Get("/officeSystem/user/getAllUser")
                    .then(result => {
                        this.userData = result.data;
                    })
                this.recordId = row.id;
                this.recordCode = row.recordCode
                this.userAccessshow = true;
            },
            userFilterMethod(query, item) {
                return item.userName.indexOf(query) > -1;
            },
            userHandleChange(value, direction, movedKeys) {
                //可以通过direction回调right/left 来进行操作，right：把数字移到右边，left把数据移到左边
                if (direction === "right") {
                    let list = [];
                    for (let i = 0; i < this.userData.length; i++) {
                        for (let j = 0; j < movedKeys.length; j++) {
                            if (this.userData[i].id == movedKeys[j]) {
                                let record = {
                                    userId: movedKeys[j],
                                    userCode: this.userData[i].userCode,
                                    userName: this.userData[i].userName,
                                    recordId: this.recordId,
                                    recordCode: this.recordCode
                                }
                                list.push(record)
                            }
                        }
                    }
                    Post("/officeSystem/meeting/insert", {
                        params: JSON.stringify(list)
                    }).then(result => {
                        if (result.status == 200) {
                            this.$message.success(result.message)
                        } else {
                            this.$message.error(result.message)
                        }
                    })
                }
                if (direction === "left") {
                    let params = {
                        params: JSON.stringify({
                            recordId: this.recordId,
                            list: movedKeys
                        })
                    }
                    Post("/officeSystem/meeting/deleteByUserIdAndRecordId", params)
                        .then(result => {
                            if (result.status == 200) {
                                this.$message.success(result.message)
                            } else {
                                this.$message.error(result.message)
                            }
                        })
                }

                this.search();
            },

            // 关闭编辑、增加弹出框
            closeDialog(formName) {
                if (formName == 'user') {
                    this.userAccessshow = false
                } else {
                    this.editFormVisible = false
                    this.$refs[formName].resetFields()
                }
            },

            selectChange(val){
                this.selectData = val;
            },
            cancel(){
                if(this.selectData.length == 0){
                    this.$message.warning("请选择要操作的数据");
                    return;
                }
                for(let i=0; i<this.selectData.length; i++){
                    delete this.selectData[i].user //true
                    delete this.selectData[i].meetingRoom
                }
                Post("/officeSystem/accountingRecord/delete", {
                    params: JSON.stringify(this.selectData)
                }).then(result => {
                    if(result.status == 200){
                        this.$message.success(result.message);
                        this.search();
                    }else{
                        this.$message.error(result.message);
                    }
                })
            },
            submitCheck(index, row){
                delete row.user;
                delete row.meetingRoom;
                let list = []
                list.push(row)
                let params = {
                    status: 1,
                    list: list
                }
                Post("/officeSystem/accountingRecord/check", {
                    params: JSON.stringify(params)
                }).then(result => {
                    if(result.status == 200){
                        this.$message.success(result.message);
                        this.search();
                    }else{
                        this.$message.error(result.message);
                    }
                })
            }
        }
    }
</script>

<style>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .el-transfer {
    text-align: left;
    display: inline-block;
  }

  .el-transfer-panel {
    width: 300px;
  }

</style>


